<style>
    .modeltype a {
        cursor: pointer;
        padding: 0 10px;
        display: inline-block;
        color: var(--grey-font-color);
        border-right: 1px solid var(--max-grey-font-color);
    }

    .modeltype a:hover {
        color: var(--primary-color);
    }

    .modeltype a.primary {
        color: var(--primary-color);
    }

    .contents .items {
        padding: 20px 10px;
        border-bottom: 1px dashed var(--max-grey-font-color);

    }

    .contents .items:hover {
        background-color: #F2F3F5;
    }

    .contents .items .title {
        font-size: 16px;
        font-weight: 600;
    }

    .contents .items .desc {
        margin-top: 10px;
        color: var(--grey-font-color);
    }


    .contents .items .desc span {
        padding-right: 15px;
    }

    .contents .items .desc span:not(:first-child) {
        padding-left: 15px;
    }

    .contents .items .desc span:not(:last-child) {
        border-right: 1px solid var(--max-grey-font-color);
    }
</style>

<div class=" rc-pannel rc-pagepadding ">
    <div class="rc-pannel-body">


        <div class="layui-tab " lay-filter="tab_PraiseCollect">
            <div class="layui-tab-brief rc-flex rc-flex-between rc-flex-item-center">
                <ul class="layui-tab-title" id="PraiseCollect_tab_li" style="flex: 1;">


                    <li class="layui-this" lay-id="1">收藏</li>
                    <li class="" lay-id="2">赞过</li>

                </ul>


            </div>


            <div class="rc-flex rc-flex-between rc-flex-item-center" style="margin-top: 15px;">
                <div class="modeltype">

                    <?php
                    foreach ($models as $key => $model) {
                    ?>
                        <a class="<?php echo $key == 0 ? 'primary' : '' ?>" tablename="<?php echo $model['tablename'] ?>"><?php echo $model['title'] ?></a>
                    <?php
                    }
                    ?>

                </div>

            </div>

            <div class="layui-tab-content ">
                <div class="layui-tab-item layui-show">
                    <div class="contents" id="contents">

                        


                    </div>
                </div>

            </div>

        </div>
    </div>

    <div class="rc-pannel-footer">
        <div id="pagebar"></div>
    </div>
</div>
<script>
    layui.use(function() {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var laypage = layui.laypage;


        var nowpage = 1;
        element.on('tab(tab_PraiseCollect)', function(data) {
            nowpage = 1;
            selContent();
        });

        $('.modeltype').find('a').click(function() {
            $('.modeltype').find('.primary').removeClass('primary');
            $(this).addClass('primary');
            selContent();
        });

        selContent();



        function renderPagebar(total) {
            if (total <= 0) {
                $('#pagebar').parent('.rc-pannel-footer').hide();
            } else {
                $('#pagebar').parent('.rc-pannel-footer').show();
            }
            laypage.render({
                elem: 'pagebar',
                limit: 10,
                count: total, // 数据总数
                curr: nowpage,
                jump: function(obj, first) {
                    if (!first) {


                        nowpage = obj.curr;
                        selContent();
                    }

                }
            });

        }


        function selContent() {
            layer.load();
            var contenttype = $('#PraiseCollect_tab_li').find('.layui-this').attr('lay-id'); // 1 收藏 2 赞过
            var tablename = $('.modeltype').find('.primary').attr('tablename'); //表名
            $.ajax({
                url: '/app/cms/uc/PraiseCollect/index?optype=' + (contenttype == 1 ? 'selCollect' : 'selPraise'), //请求路径
                type: "POST", //请求方式
                data: {
                    tablename: tablename,
                    page: nowpage
                },
                success: function(data) {
                    if (data.code == 0) {
                        var contentitems = '';
                        $.each(data.data.items, function(i, v) {
                            contentitems += `
                                    <div class="items">
                                        <a href="` + v.contenturl + `" target="_blank">
                                            <div class="title rc-flex rc-flex-between">
                                                <div> ` + v.title + ` </div>

                                            </div>

                                            <div class="desc">
                                                <span>` + v.createtime + `</span>
                                                <span>
                                                    ` + v.viewscount + `阅读 · ` + v.praise + `点赞 · ` + v.comment + `评论 · ` + v.collect + `收藏
                                                </span>
                                                <span>
                                                    ` + v.ancestorsCatetitle + `
                                                </span>
                                            </div>
                                        </a>
                                    </div>
                            `;
                        });

                        $('#contents').html(contentitems);
                        renderPagebar(data.data.total);

                    }
                },
                error: function() {

                },
                complete: function() {
                    layer.closeAll();
                }

            });
        }

    });
</script>